<template>
    <div>
      <div class="top-search">
        <el-input
          placeholder="请输入题号"
          style="flex: 4"
          v-model="input"
          clearable>
        </el-input>
        <el-button type="primary" style="flex: 0.3;margin-left: 1vw">预测</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 70%;margin-left: 15%;margin-top: 3vh">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="题目"
          width="250">
          <template slot-scope="scope">
            <div @click="detailData(scope.row)" style="color: #5E1C7A">{{scope.row.title}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="user"
          label="用户"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="180">
        </el-table-column>
        <el-table-column
          prop="forecast"
          label="预测通过概率"
          width="auto">
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        name: "forecast-page",
      data(){
          return{
            input: '',
            tableData: [{
              id: '1',
              title: 'The A+B Problem',
              user:'admin',
              lang:'cpp',
              status:0,
              forecast:0.8888
            },
              {
                id: '2',
                title: 'The A+B Problem',
                user:'admin',
                lang:'cpp',
                status:1,
                forecast: 0.8888
              },
              {
                id: '3',
                title: 'The A+B Problem',
                user:'admin',
                lang:'cpp',
                status:2,
                forecast:0.8888
              },
              {
                id: '4',
                title: 'The A+B Problem',
                user:'admin',
                lang:'cpp',
                status:3,
                forecast:0.8888
              },
              {
                id: '5',
                title: 'The A+B Problem',
                user:'admin',
                lang:'cpp',
                status:3,
                forecast: 0.8888
              },
              {
                id: '6',
                title: 'The A+B Problem',
                user:'admin',
                lang:'cpp',
                status:3,
                forecast: 0.8888
              }]
          }
      }
    }
</script>

<style scoped>
.top-search{
  display: flex;
  width: 60%;
  justify-content: center;
  align-items: center;
  margin-left: 20%;
  margin-top: 5vh;
}
</style>
